<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素选择</title>
    <style>

        body > div {
            border: 1px solid black;
            margin-top: 20px;
        }

    </style>
</head>
<body>
<div id="box">
    <h1>观察后代选择器的作用</h1>
    <p>zym的信息:</p>
    <div>
        <label>姓名</label>
        <p>zym</p>
        <label>年龄</label>
        <p>25</p>
        <label>地址</label>
        <p>西西荷花</p>
    </div>
</div>

<div id="box1">
    <h1>观察层级选择器的作用</h1>
    <p>ff的信息:</p>
    <div>
        <label>姓名</label>
        <p>ff</p>
        <label>年龄</label>
        <p>25</p>
        <label>地址</label>
        <p>西西荷花</p>
    </div>
</div>

<div>
    <h1>同代单, 多节点选择器</h1>
    <p class="p1" id="pOne">段1</p>
    <p class="p1">段2</p>
    <p class="p1">段3</p>
    <p class="p1">段4</p>

    <p class="p1" id="pTwo">段11</p>
    <p class="p1">段12</p>
    <p class="p1">段13</p>
    <p class="p1">段14</p>

    <div>
        <p class="p1" id="pThree">段21</p>
        <p class="p1">段22</p>
        <p class="p1">段23</p>
        <p class="p1">段24</p>
    </div>

    <div>
        <p class="p1" id="pFour">段31</p>
        <p class="p1">段32</p>
        <p class="p1">段33</p>
        <p class="p1">段34</p>
    </div>
</div>

<div id="box4">
    <h1>基本过滤选择器</h1>
    <p>段123</p>
    <p>段124</p>
    <p>段125</p>
    <p>段126</p>
    <p>段127</p>
</div>

<div id="box5">
    <h1>内容过滤选择器</h1>
    <p>我叫zym1</p>
    <p>他叫zym2</p>
    <p>她叫zym3</p>
</div>

<div id="box6">
    <h1>可见性选择器</h1>
    <input type="hidden" value="1" />
    <input type="hidden" value="2" />
    <input type="hidden" value="3" />
</div>
</body>
<script src="/static/jquery-3.4.1.js"></script>
<script>

    $(function () {
        childSelector();
        levelSelector();
        siblingSelector();
        filterSelector();
        contentSelector();
        visibilitySelector();
    });

    function childSelector() {
        $("#box p").css({
            color: 'red',
            display: 'inline'
        });
    }

    function levelSelector() {
        //这种方式限定了选择器只选择box1下一层的p标签, 不会去选择再下一层.
        $('#box1 > p').css({
            color: 'red',
            display: 'inline'
        });
    }

    //同代选择器
    function siblingSelector() {
        //下面的两个方法是等价的
        $('#pOne + p').css({
            color: 'red'
        });
        $('#pTwo').next("p").css({
            color: 'blue'
        });

        //下面的两个方法是等价的
        $('#pThree ~ p').css({
            color: 'red',
            display: 'inline'
        });
        $('#pFour').nextAll('p').css({
            color: 'blue',
            display: 'inline'
        });
    }

    //基本过滤选择器
    function filterSelector() {
        $('#box4 p').css({
            display: 'inline',
            marginRight: '15px'
        });

        $('#box4 p:first').css({
            color: 'red'
        });

        $('#box4 p:last').css({
            color: 'blue'
        });
    }

    //内容选择器
    function contentSelector() {
        $("#box5 p:contains('我')").css({
            color: 'red'
        });

        $("#box5 p:contains('叫')").css({
            fontSize: 5
        });
    }

    //可见性选择器
    function visibilitySelector() {
        let result = '';
        /**
         * 说明:
         *      1. :hidden: 选择隐藏的元素;
         *      2. :visible: 选择可见的元素.
         */
        $("#box6 input:hidden").each(function () {
            result += ($(this).val() + ',');
        });
        console.log(result);
    }

</script>
</html>